<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付订单</title>
    <link rel="stylesheet" href="css/order.css">
    <!--引入字体图标-->
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <div class="page-main">
        <div class="container confirm-box">
            <div class="confirm-context">
                <div class="confirm-order" id="confirmOrder">
                    <div class="section section-order">
                        <div class="order-info clearfix">
                            <div class="fl"><h2 class="title">订单提交成功！去付款咯～</h2>
                                <p class="post-info">收货信息：
                                    <span class="name" v-text="order.receiverName">张三</span>
                                    <span class="tel" v-text="order.receiverPhone">13911112222</span>
                                    <span class="address-con"><span v-text="order.receiverProvince">福建</span>
                                        <span v-text="order.receiverCity">厦门市</span>
                                        <span v-text="order.receiverDistrict">湖里区</span>
                                        <span v-text="order.receiverStreet">江头街道</span>
                                    </span>
                                </p>
                            </div>
                            <div class="fr">
                                <div class="total">应付总额：<span class="money"><em v-text="order.orderTotal">2199</em><span>元</span></span></div>
                                <a href="javascript:void(0);" class="show-detail">订单详情<i class="fa fa-chevron-down"></i></a>
                            </div>
                        </div>
                        <i class="fa fa-check"></i>
                        <div class="order-detail J_showOrderDetail">
                            <ul>
                                <li class="clearfix">
                                    <div class="label"> 订单号：</div>
                                    <div class="content"><span class="order-num" v-text="order.orderNo">5220119891404543</span>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="label"> 收货信息：</div>
                                    <div class="content">
                                        <span class="name" v-text="order.receiverName">张三</span>
                                        <span class="tel" v-text="order.receiverPhone">13911112222</span>
                                        <span v-text="order.receiverProvince">福建</span>
                                        <span v-text="order.receiverCity">厦门市</span>
                                        <span v-text="order.receiverDistrict">湖里区</span>
                                        <span v-text="order.receiverStreet">江头街道后埔xxx号</span>
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="label"> 商品名称：</div>
                                    <div class="content"><div v-for="orderItem in order.orderItems" v-text="orderItem.itemsName">红茶</div></div>
                                </li>
                                <li class="clearfix hide">
                                    <div class="label"> 配送时间：</div>
                                    <div class="content">不限送货时间</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="confirm-pay">
                    <div class="section section-payment">
                        <div class="cash-title">
                            <div>选择以下支付方式付款</div>
                        </div>

                        <div class="payment-box">
                            <div class="payment-header clearfix"><h3 class="title">支付平台</h3><span class="desc"></span></div>
                            <div class="payment-body">
                                <ul class="clearfix payment-list J_paymentList">
                                    <li alt="alipay" type="alipay" onclick="sendPay()" class="J_bank">
                                        <img src="images/7b6b02396368c9314528c0bbd85a2e06.png" alt="支付宝"></li>
                                </ul><!----></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--引入Vue组件库-->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/order.js"></script>
    <script src="js/confirm.js"></script>
    <script>
        $(function(){
            var i = 0;
            $(".show-detail").click(function () {
                if(i==0){
                    $(".post-info").hide();
                    $(".order-detail").show();
                    i=1;
                }else{
                    $(".post-info").show();
                    $(".order-detail").hide();
                    i=0;
                }
            });
        });
    </script>
</body>
</html>